<template>
<div>
  <div class="layout">
    <div class="register-container">
      <Subtitle
          :text="$t('forget.reset.title')"
          :desc="$t('forget.reset.desc')"
      />
      <IntelInput
          :label="$t('forget.reset.password')"
          v-model="password"
          type="password"
          :placeholder="$t('forget.reset.password')"
          class="register-input"
          style="margin-top: 60px;"
          :error="!passwordValid && verifyValid"
          @blur="handlePasswordInputBlur"
          @input="handlePasswordInputChange"
      />
      <div class="password-prompt">
        <div :class="[{ 'text-blue': wordValid },  'text']">必须包含一个字母</div>
        <div :class="[{ 'text-blue': numberValid },  'text']">必须包含一个数字</div>
        <div :class="[{ 'text-blue': characterValid },  'text']">必须包含一个特殊字符</div>
        <div :class="[{ 'text-blue': lengthValid },  'text']">长度必须为 8 至 15 个字符</div>
        <!--          <div :class="[{ 'text-green': repeatValid },  'text']">不能连续重复两次以上相同的字符</div>-->
      </div>
      <IntelInput
          :label="$t('forget.reset.passwordVerify')"
          type="password"
          v-model="passwordVerify"
          :placeholder="$t('forget.reset.passwordVerify')"
          class="register-input"
          :error="!verifyValid"
          @blur="handleVerifyInputBlur"
          @input="handleVerifyInputChange"
      />
      <div class="password-prompt" v-if="!verifyValid">
        <div style="color: red">两次密码不一致</div>
      </div>
      <div class="button primary-button m-t-40" @click="handleSubmit" v-show="!loading">{{ $t('forget.buttonText') }}</div>
      <div class="button primary-button m-t-40" style="background-color: gray;color: #2e2f30" v-show="loading">{{ $t('forget.loadingText') }}</div>
    </div>
  </div>
  <Alert v-if="alertShow" :alertKey="alertKey" @ok="handleAlertOk" :content="alertContent"/>
</div>
</template>

<script>
import IntelInput from "../../components/common/IntelInput";
import Subtitle from "../../components/common/Subtitle";
import {getUserInfo, register, resetPasswordByEmail, sendResetPasswordEmail, validEmail} from "../../api/service";
import Alert from "../../components/common/Alert";

export default {
  name: "faq",
  components: {
    IntelInput,
    Subtitle,
    Alert
  },
  data () {
    return {
      loading: false,
      password: '',
      passwordVerify: '',
      passwordValid: true,
      verifyValid: true,
      wordValid: false,
      numberValid: false,
      characterValid: false,
      lengthValid: false,
      alertShow: false,
      alertContent: '',
      alertKey: '0',
      token: null
    }
  },
  created () {
    // 获取地址栏token
    if (process.client) {
      this.token = this.$route.query.token
      localStorage.setItem('token', this.$route.query.token)
    }
  },
  methods: {
    handlePasswordInputChange () {
      const psw = this.password
      // 必须包含一个字母
      this.wordValid = new RegExp('^(?=.*?[A-Z])|(?=.*?[a-z])').test(psw)
      // 必须包含一个数字
      this.numberValid = new RegExp('^(?=.*?[0-9])').test(psw)
      // 必须包含一个特殊字符
      this.characterValid = new RegExp('^(?=.*?[#?!@$%^&*-.])').test(psw)
      // 长度必须为 8 至 15 个字符
      this.lengthValid = new RegExp('\\b\\w{8,15}\\b').test(psw)

    },
    handlePasswordInputBlur () {
      // const reg = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-.]).{8,}$/
      this.passwordValid = this.wordValid && this.numberValid && this.characterValid && this.lengthValid
    },
    handleVerifyInputBlur () {
      if (this.passwordVerify) {
        this.verifyValid = this.password === this.passwordVerify
      } else {
        this.verifyValid = true
      }
    },
    handleVerifyInputChange () {
      if (this.passwordVerify) {
        this.verifyValid = this.password === this.passwordVerify
      } else {
        this.verifyValid = true
      }
    },
    handleSubmit () {
      if (this.passwordValid && this.verifyValid && this.passwordVerify && this.password) {
        this.resetPassword()
      } else {
        this.alertKey = '0'
        this.alertShow = true
        this.alertContent = this.$t('请检查输入项')
      }
    },
    resetPassword () {
      resetPasswordByEmail({ passwd: this.password, token:token }).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.alertKey = '1'
          this.alertShow = true
          this.alertContent = '密码重置成功,点击确定返回首页'
        } else {
          this.alertKey = '0'
          this.alertShow = true
          this.alertContent = res.data.message
        }
      })
    },
    handleAlertOk (key) {
      this.alertShow = false
      if (key === '1') {
        this.$router.push({
          path: this.$i18n.path('')
        })
      }
    }
  }
}
</script>

<style scoped>
.register-container {
  width: 800px;
  padding-top: 60px;
  padding-left: 120px;
  padding-bottom: 120px;
}

.create-text {
  padding-top: 0px;
}
.create-text .title {
  font-weight: bold;
  font-size: 20px;
  color: #0068B5;
  padding-bottom: 18px;
}
.create-text .desc {
  font-size: 14px;
  color: #999999;
}

.create-text .desc a {
  color: #0068B5;
  text-decoration: none;
}

.form {
  padding-top: 24px;
}
.register-input {
  margin-top: 16px;
  width: 100%;
}
.password-prompt {
  font-size: 14px;
  color: #999999;
}
.submit-button {
  width: 146px;
  height: 36px;
  color: white;
  font-size: 14px;
  text-align: center;
  line-height: 36px;
  background: #0068B5;
  cursor: pointer;
  margin-top: 16px;
}
.password-prompt {
  padding-top: 10px;
}
.text-blue {
  color: #0068B5;
  text-decoration: underline;
}

.input-group {
  width: 100%;
  display: flex;
}
.divider-space {
  width: 32px;
  height: 60px;
  display: inline-block;
}

</style>
